<template>
    <div>
               
        <div class="crumbs">
                       
            <el-breadcrumb separator="/">
                                <h3 style="color #DDDDDD">当前位置:基础信息功能/班级设置</h3>
                           
            </el-breadcrumb>
                   
        </div>
        <el-button  class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
         @click="open">添加</el-button>
      
      <el-button
        class="filter-item"
        size="mini"
        type="primary"
        icon="el-icon-upload"
        @click="dialogVisible = true"
      >批量导入</el-button>
     
        <!-- <el-button type="text" @click="add">批量导入</el-button> -->
        <el-dialog :title="titles" v-model="dialogFormVisible">
            <el-form :model="form" :rules="addFormRules" ref="addFormRef">
                <el-form-item label="班级编号" label-width="100px">
                    <el-input v-model="form.classid"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="专业" label-width="100px">
                    <el-input v-model="form.classzy"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="班级名称" label-width="100px">
                    <el-input v-model="form.classname"/>
                </el-form-item>
            </el-form>
            <el-form :model="form">
                <el-form-item label="班级人数" label-width="100px">
                    <el-input v-model="form.classnum"/>
                </el-form-item>
            </el-form>
			<el-form :model="form">
			    <el-form-item label="所属系部" label-width="100px">
			        <el-input v-model="form.ssxb"/>
			    </el-form-item>
			</el-form>
            <div class="dialog-footer">
                <el-button @click="dialogFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="submitCheck">确 定</el-button>
            </div>
        </el-dialog>
        <el-dialog title="批量导入" v-model="dialogVisible">
            <el-form-item >
            选择Excel:
                 <upload-excel-component  :on-success="handleSuccess" :before-upload="beforeUpload" />
            </el-form-item>
        </el-dialog>
        <el-table
                :data="tableData"
                style="width: 100%">
            <el-table-column
                    prop="classid"
                    label="班级编号"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="classzy"
                    label="专业"
                    width="250"
            >
            </el-table-column>
            <el-table-column
                    prop="classname"
                    label="班级名称"
                    width="250">
            </el-table-column>
            <el-table-column
                    prop="classnum"
                    label="班级人数"
                    width="250"
            >
            </el-table-column>
			<el-table-column
			        prop="ssxb"
			        label="所属系部"
			        width="250"
			>
			</el-table-column>
            <el-table-column
                    label="操作"
                    width="250">

                <template #default="scope">

                    <el-button type="primary"  @click="updateId(scope.row)">编辑</el-button>
                    <el-button type="danger" @click="deleteID(scope.row)">删除</el-button>
                </template>

            </el-table-column>
        </el-table>

        <el-pagination

                @current-change="page"
                current-page.sync="5"
                :page-size="currentPage.limit"
                layout="total, prev, pager, next"
                :total="currentPage.current">
        </el-pagination>

    </div>
</template>
<script type=“module”>
 import UploadExcelComponent from '../components/UploadExcel/index.vue'
    import {addclass, classpostmethod, deleteID,excelimport} from '../api/index.js'
    export default {
      components: { UploadExcelComponent },
        created() {
            this.getdata(1);
        },
        methods: {


    beforeUpload(file) {
      const isLt1M = file.size / 1024 / 1024 < 1
      if (isLt1M) {
        return true
      }
      this.$message({
        message: 'Please do not upload files larger than 1m in size.',
        type: 'warning'
      })
      return false
    },   
    //成功
     handleSuccess({ results, header }) {
     console.log(results.length)
     console.log(results)
	 var a=[];
	 var w = {};
	 for(var i=0;i<results.length;i++){
		 var x = JSON.parse(JSON.stringify(results[i]).replace(/班级编号/g,"classid"));
		 var y = JSON.parse(JSON.stringify(x).replace(/专业/g,"classzy"));
		 var z = JSON.parse(JSON.stringify(y).replace(/班级人数/g,"classnum"));
		 var k =JSON.parse(JSON.stringify(z).replace(/所属系部/g,"ssxb"));
		 w = JSON.parse(JSON.stringify(k).replace(/班级名称/g,"classname"));
		 
		 addclass(w).then(Object => {
		     this.getdata(1);
		     this.dialogFormVisible = false;
			 this.dialogVisible = false;
		 
		 })
		 
	 }
	 this.dialogVisible = false;
	 this.$message({
	   message: '导入成功!',
	   type: 'success'
	 });
	 
    },
            submitCheck() {
                this.$refs.addFormRef.validate(valid => {
                    addclass(this.form).then(Object => {
                        this.getdata(1);
                        this.dialogFormVisible = false;

                    })
                })

            },
            deleteID(row) {
				this.$confirm('确认删除?', '提示', {
				  confirmButtonText: '确定',
				  cancelButtonText: '取消',
				  type: 'warning'
				}).then(() => {
					deleteID(row).then(Object => {
					    this.getdata(1);
					
					})
				  this.$message({
					type: 'success',
					message: '删除成功!'
				  });
				}).catch(() => {
				  this.$message({
					type: 'info',
					message: '已取消删除'
				  });          
				});

            },
            updateId(row) {
                this.form = row;
                this.dialogFormVisible = true;
                this.titles='编辑';

            },
            submitUpload() {
                this.fileUploadBtnText = '正在上传'
                this.importBtnDisabled = true
                this.loading = true
                this.$refs.upload.submit()
            },

            fileUploadSuccess(response) {
                if (response.success === true) {
                    this.fileUploadBtnText = '导入成功'
                    this.importBtnDisabled = false
                    this.loading = false
                    this.$message({
                        type: 'success',
                        message: response.message
                    })
                }
            },

            fileUploadError() {
                this.fileUploadBtnText = '导入失败'
                this.loading = false
                this.$message({
                    type: 'error',
                    message: '导入失败'
                })
            },


            open() {
                console.log(this.dialogFormVisible)
                console.log()
                this.dialogFormVisible = true;
                this.form.pkId=0;
                this.titles='添加'
            },
            // add() {
            //     console.log(this.dialogVisible);
            //     // this.dialogFormVisible1 = true;
            //    this.dialogVisible=true;
            // },
            getdata(obj) {
                this.currentPage.page = obj
                classpostmethod(this.currentPage).then(Object => {
                    this.tableData = Object.records[0];
                    // console.log(Object);
                    this.currentPage.current = Object.rowCount;

                })
            },
            // handleClick(row) {
            //     console.log(row);
            // },
            page(currentPage) {
                this.getdata(currentPage);
            }
        },
        data() {
            return {
                titles:'添加',
                total: null,
                tableData: null,
                dialogVisible:false,
                dialogFormVisible: false,
                dialogFormVisible1: false,
                currentPage: {
                    page: 1,
                    total: 20,
                    count: 50,
                    current: 0,
                    limit: 10,
                    // BASE_API: process.env.BASE_API, // 接口API地址
                    fileUploadBtnText: '上传到服务器', // 按钮文字
                    importBtnDisabled: false, // 按钮是否禁用,
                    loading: false
                },
                form: {
                    pkId: 0,
                    classid: '',
                    classzy: '',
                    classname: '',
                    classnum: '',
					ssxb:''
                }
            }
        }
    }
</script>
